@extends('admin.defaults.head')
@section('title','标题')
@section('body')

{{--请在下面编辑body 内容--}}






<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">
    <input type="hidden" name="buttons" id="icon">




    <p style="padding: 0 10px">注意：如果是自定义按钮请将要权限控制的按钮class名称填入，无权限者将自动隐藏。实际权限将由url控制</p>
    <table class="layui-table">
        <colgroup>
            <col width="200">
            <col width="200">
            <col>
            <col width="80">
        </colgroup>
        <thead>
        <tr>
            <th>名称</th>
            <th>按钮calss名称</th>
            <th>规则url</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="datai in buttons">
            <td>
                <input type="text" v-model="datai.title" class="layui-input" >
            </td>
            <td>
                <input type="text" v-model="datai.class" class="layui-input" >
            </td>
            <td>
                <input type="text" v-model="datai.rule" class="layui-input" >
            </td>
            <td>
                <button type="button" @click="dele(datai)" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
            </td>
        </tr>

        </tbody>
    </table>
    <div style="align-content: center;text-align: center">
        <button type="button" @click="add" class="layui-btn layui-btn-lg layui-btn-normal">添加</button>

    </div>







    <div class="layui-form-item layui-hide">
        <button class="layui-btn" lay-submit @click="save()" lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
    </div>
</div>





{{--上方body内容结束   请在下面编辑script 内容--}}

@endsection
@section('script')

    <script>
        layui.use(['form'], function(){
            var $ = layui.$
                ,form = layui.form ;
        });


        var getbuttons = (getPar('buttons'));
        getbuttons = decodeURI(getbuttons);

        getbuttons = getbuttons == '{}' || !getbuttons || getbuttons=='null'? [] : JSON.parse(getbuttons);
        var vuell= new Vue({
            el: "#vueapp",
            data:{
                buttons:getbuttons,
            },
            mounted () {
            },
            methods: {
                save(){
                    var _this=this;
                    $("#icon").val(JSON.stringify(_this.buttons));

                },
                add(){
                    var _this=this;
                    _this.buttons.push({
                        "title":'',
                        "rule":'',
                        "class":'',
                    });
                },
                dele(item){

                    var _this=this;
                    _this.buttons.splice(_this.buttons.indexOf(item), 1);

                 /*   layer.confirm('确定删除 '+item.title+' 按钮吗？', function(index) {
                        _this.buttons.splice(_this.buttons.indexOf(item), 1);
                        layer.close(index); //关闭弹层

                    });*/
                },

            }});
    </script>
@endsection
